<template>
  <div class="all">
    <van-field
      v-model="state.fieldValue"
      is-link
      readonly
      label="位置"
      placeholder="上海市 "
      @click="state.show = true"
    />
    <van-popup v-model:show="state.show" round position="bottom">
      <van-cascader
        v-model="state.cascaderValue"
        title="上海市 上海市 黄浦区 建国西路"
        :options="options"
        @close="state.show = false"
        @finish="onFinish"
      />
    </van-popup>
    <div v-on:click="dok" class="div">
      <p v-if="isOver">编辑商品</p>
      <p v-if="isOk">完成</p>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive } from 'vue'
export default {
  data() {
    return {
      cityData: '',
      isOver: true,
      isOk: false,
    }
  },
  setup() {
    const state = reactive({
      show: false,
      fieldValue: '',
      cascaderValue: '',
    })
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [
      {
        text: '上海市',
        value: '330000',
        children: [
          {
            text: '上海市',
            value: '330100',
            children: [
              {
                text: '黄浦区',
                value: '331000',
                children: [{ text: '建国西路', value: '332000' }],
              },
            ],
          },
        ],
      },
      {
        text: '江苏省',
        value: '320000',
        children: [{ text: '南京市', value: '320100' }],
      },
    ]
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      state.show = false
      state.fieldValue = selectedOptions.map((option) => option.text).join('/')
    }

    return {
      state,
      options,
      onFinish,
    }
  },
  mounted() {
    this.find()
  },
  methods: {
    dok() {
      this.isOver = !this.isOver
      this.isOk = !this.isOk
    },
    find() {
      //   console.log(localStorage.getItem('data'))
      if (localStorage.getItem('data')) {
        this.$store
          .dispatch({
            type: 'getCity',
          })
          .then((data) => {
            this.cityData = data
            // console.log(data)
          })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.all {
  display: flex;
  justify-content: flex-end;
  .div {
    margin-right: 10px;
    width: 60px;
    color: red;
    p {
      text-align: right;
    }
  }
}
</style>
